<template>
  <div id="index" ref="appRef">
    <div class="user-page">
      <div class="card">
        <!-- 用户信息 -->
        <div class="card-item">
          <div class="title font-24">用户信息</div>
          <div class="user-info">
            <div class="user-avatar" @click="openuserUpload(true)">
              <n-avatar round :size="118" :src="userInfo.avatar" />
            </div>
            <div class="user-name font-24">{{ userInfo.account }}</div>
          </div>
          <div class="btn-box">
            <div class="btn-item bg-blue" @click="logOut">切换用户</div>
            <div class="btn-item bg-yellow" @click="logOut">注销</div>
          </div>
        </div>
        <!-- 产品信息 -->
        <div class="card-item">
          <div class="title font-24 margin-bot30">
            <div>产品信息</div>
            <div v-if="store.superUser < 2" @click="closeBtn(true)">
              <icons class="edit-icon" name="editIcon" />
            </div>
          </div>
          <div class="label-item">
            <div class="label-txt">产品名称</div>
            <div class="label-input">
              <n-input
                maxlength="50"
                readonly
                v-model:value="productInfo.productName"
                type="text"
                placeholder=""
              />
            </div>
          </div>
          <div class="label-item">
            <div class="label-txt">产品版本号</div>
            <div class="label-input">
              <n-input
                maxlength="50"
                readonly
                v-model:value="productInfo.productVersion"
                type="text"
                placeholder=""
              />
            </div>
          </div>
          <div class="title font-24 margin-bot30 margin-top40">公司信息</div>
          <div class="logo-box">
            <div class="label-txt">公司LOGO</div>
            <div class="logo-div">
              <img class="companyLogo" :src="productInfo.companyLogo" alt="" />
            </div>
          </div>
          <div class="label-item">
            <div class="label-txt">公司名称</div>
            <div class="label-input">
              <n-input
                maxlength="50"
                readonly
                v-model:value="productInfo.companyName"
                type="text"
                placeholder="请输入公司名称"
              />
            </div>
          </div>
          <div class="title font-24 margin-bot30 margin-top40">其他信息</div>
          <div
            v-for="(item, i) in productInfo.otherInfoData"
            :key="i"
            class="label-item"
          >
            <div class="label-txt">{{ item.key }}</div>
            <div class="label-input">
              <n-input
                maxlength="50"
                readonly
                v-model:value="item.value"
                type="text"
                placeholder="请输入产品名称"
              />
            </div>
          </div>
        </div>
        <div v-if="store.superUser < 2" class="card-item">
          <n-tabs
            default-value="userlist"
            size="large"
            justify-content="space-evenly"
            tab-style="tab-class"
          >
            <n-tab-pane name="userlist" tab="用户列表">
              <div class="search-box">
                <n-input
                  maxlength="50"
                  v-model:value="pagination.keyWord"
                  placeholder="请输入"
                  @input="searchFun"
                >
                  <template #suffix>
                    <icons
                      class="icon"
                      style="color: rgba(255, 255, 255, 0.2)"
                      name="search"
                    />
                  </template>
                </n-input>
                <n-button class="add" @click="addUser(false)">+新增</n-button>
              </div>
              <n-data-table
                :columns="columns"
                :data="userList"
                :pagination="false"
                :bordered="false"
                :single-line="false"
              />
              <div class="pagination-view">
                <n-pagination
                  v-model:page="pagination.page"
                  :item-count="pagination.itemCount"
                  :page-size="pagination.pageSize"
                  @update:page="GetAllUserInfoFun"
                  :page-slot="7"
                />
              </div>
            </n-tab-pane>
            <n-tab-pane name="powerlist" tab="权限列表">
              <!-- <div class="search-box">
              <n-input maxlength="50" placeholder="请输入">
                <template #suffix>
                  <icons
                    class="icon"
                    style="color: rgba(255, 255, 255, 0.2)"
                    name="search"
                  />
                </template>
              </n-input>
            </div> -->
              <n-data-table
                :columns="powerColumns"
                :data="powerData"
                :single-line="false"
                :pagination="false"
                :bordered="false"
                titleAlign="center"
              />
              <div class="power-btn" @click="openPower = true">编辑权限</div>
            </n-tab-pane>
          </n-tabs>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑或新增用户信息 -->
  <model-dialog
    :dialogTitle="userEditData.id ? '编辑用户' : '新增用户'"
    :showModal="userEditData"
    @closeModel="closeUserInfoDialog"
  >
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="user-dialog">
        <div class="user-info-item">用户名</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            v-model:value="userEditData.account"
            type="text"
            placeholder="请输入用户名"
          />
        </div>
        <div class="user-info-item">权限</div>
        <div class="user-info-item">
          <n-select
            v-model:value="userEditData.permissions"
            placeholder="权限"
            :options="powerOptions"
          />
        </div>
        <div class="desc">
          <icons class="icon" name="tanhao" />一级权限可以编辑所有内容
        </div>
        <div v-if="store.superUser < 1" class="user-info-item">所属公司</div>
        <div v-if="store.superUser < 1" class="user-info-item">
          <n-select
            v-model:value="userEditData.companyId"
            placeholder="选择所属公司"
            :options="companyData"
          />
        </div>
        <div class="user-info-item">所属部门</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            v-model:value="userEditData.department"
            type="text"
            placeholder="请输入所属部门"
          />
        </div>
        <div class="user-info-item">员工号</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            v-model:value="userEditData.workNumber"
            type="text"
            placeholder="请输入员工号"
          />
        </div>
        <div class="user-info-item">手机号</div>
        <div class="user-info-item">
          <n-input
            v-model:value="userEditData.phoneNumber"
            type="text"
            maxlength="11"
            :allow-input="onlyAllowNumber"
            placeholder="请输入手机号"
          />
        </div>
        <div class="user-info-item">密码</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            type="password"
            show-password-on="mousedown"
            v-model:value="userEditData.password"
            placeholder="请输入密码"
          />
        </div>
        <div class="user-info-item">上传头像</div>
        <div class="user-info-item">
          <n-upload
            list-type="image-card"
            :default-file-list="previewFileList"
            :custom-request="customRequest"
            accept="image/png, image/jpeg,image/webp"
            :max="1"
          >
            点击上传
          </n-upload>
          <div class="notice">建议上传尺寸90*90</div>
        </div>
        <div class="div">
          <div class="submit-btn" @click="InsertUserInfoFun">保存</div>
          <div
            v-if="userEditData.id"
            class="submit-btn del"
            @click="DeleteUserInfoFun(userEditData.id)"
          >
            删除
          </div>
        </div>
      </div>
    </n-scrollbar>
  </model-dialog>
  <model-dialog
    dialogTitle="头像上传"
    :showModal="userUpload"
    @closeModel="openuserUpload"
    style="width: 335px"
  >
    <div class="user-upload-view">
      <n-upload
        list-type="image-card"
        :default-file-list="previewFileList1"
        :custom-request="customRequest"
        accept="image/png, image/jpeg,image/webp"
        :max="1"
      >
        点击上传
      </n-upload>
      <div class="notice">建议上传尺寸90*90</div>
    </div>
    <div class="submit-btn1" @click="uploaduserFun">保存</div>
  </model-dialog>
  <EdittProduct
    v-if="editProduct"
    :openWin="editProduct"
    :ductInfo="editData"
    @closeWin="closeWin"
  />
  <model-dialog
    dialogTitle="权限编辑"
    :showModal="openPower"
    @closeModel="closeDalog"
    style="width: 400px"
  >
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="power-view">
        <n-tree
          block-line
          cascade
          checkable
          :selectable="false"
          :data="powerTree"
          :default-expanded-keys="defaultExpandedKeys"
          :default-checked-keys="defaultCheckedKeys"
          @update:checked-keys="updateCheckedKeys"
        />
      </div>
    </n-scrollbar>
    <div class="submit-btn1" @click="updatePower">保存</div>
  </model-dialog>
</template>
<script lang="ts" setup>
import { h, ref, computed, onMounted, onUnmounted } from "vue";
import Cookies from "js-cookie";
import { useRouter } from "vue-router";
import useDraw from "@/utils/useDraw";
import { useAppStore } from "@/store/modules/user";
import ModelDialog from "@/components/Dialog/index.vue";
import { uuid } from "@/tools/radom";
import { NButton, UploadFileInfo, UploadCustomRequestOptions } from "naive-ui";
import {
  GetMdsInfomation,
  UploadFile,
  GetAllUserInfo,
  GetPermissionsList,
  InsertUserInfo,
  UpdateUserInfo,
  GetAllCompanyData,
  GetSingleUserInfo,
  UpdateUserAvatarInfo,
  InsertOrUpdateUserPermissions,
  GetUserPermissions,
  DeleteUserInfo,
} from "@/server";
import { useDialog } from "naive-ui";
import EdittProduct from "./components/EdittProduct.vue";
const dialog = useDialog();
const store = useAppStore();
const router = useRouter();
const userInfo = computed(() => store.userInfo); //用户信息
const avatarInfo = ref("");
const editProduct = ref(false);
const openPower = ref(false);
const user = ref(null) as any;
const editData = ref(null) as any;
const productInfo = ref({
  productName: "",
  productVersion: "",
  companyLogo: "",
  companyName: "",
  otherInfo: "",
}) as any;
//查询
const pagination = ref({
  keyWord: "",
  page: 1,
  pageSize: 8,
  itemCount: 0,
});
const defaultExpandedKeys = ref([]);
const defaultCheckedKeys = ref([]);
const companyData = ref([]) as any;
const userList = ref([]) as any;
const userEditData = ref(false) as any; //当前选中用户
const previewFileList = ref<UploadFileInfo[]>([]);
const previewFileList1 = ref<UploadFileInfo[]>([]);
const powerOptions = ref([]) as any;
const userUpload = ref(false);
const columns = [
  {
    title: "用户名",
    key: "account",
    width: "30%",
    align: "center",
  },
  {
    title: "工号",
    key: "workNumber",
    width: "30%",
    align: "center",
  },
  {
    title: "权限",
    key: "permissions",
    width: "30%",
    align: "center",
  },
  {
    title: "操作",
    key: "actions",
    width: "10%",
    align: "center",
    render(row: any) {
      return h(
        NButton,
        {
          style: {
            color: "rgba(0, 191, 227, 1)",
            background: "none",
            padding: "0",
          },
          strong: true,
          tertiary: true,
          size: "small",
          onClick: () => addUser(row),
        },
        { default: () => "编辑" }
      );
    },
  },
];
const onlyAllowNumber = (value: string) => {
  return !value || /^\d+$/.test(value);
};
const userCount = ref(0);
const powerColumns = [
  {
    title: "权限名称",
    key: "powerName",
    align: "center",
    width: "30%",
  },
  {
    title: "权限内容",
    key: "powerContent",
    align: "center",
  },
];
const powerData = ref([]) as any;
const powerTree = ref([]) as any;
const powerList = ref([]) as any;
const closeDalog = () => {
  openPower.value = false;
};
const openuserUpload = (type: boolean) => {
  if (type && userInfo.value.avatar) {
    previewFileList1.value = [
      {
        id: "1",
        name: "",
        status: "finished",
        url: userInfo.value.avatar,
      },
    ];
  }
  userUpload.value = type;
};
const DeleteUserInfoFun = async (id: any) => {
  dialog.warning({
    title: "删除用户",
    content: `是否确认要删除当前用户？`,
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      // message.success("确定");
      let res: any = await DeleteUserInfo({ id: id });
      if (res.result.isSuccess) {
        pagination.value.page = 1;
        GetAllUserInfoFun();
        store.success(res.result.message); // 错误提示
        userEditData.value = false;
      } else {
        store.error(res.result.message); // 错误提示
      }
    },
    onNegativeClick: () => {
      // message.error("不确定");
    },
  });
};
const checkedPowerList = ref([]) as any;
const updateCheckedKeys = (keys: Array<string | number>) => {
  checkedPowerList.value = keys;
};
function transformData(treeData: any, selectedNodes: any) {
  return treeData.map((level1: any) => {
    return {
      permissions: level1.permissions,
      datas: level1.datas
        .filter((data: any) => selectedNodes.includes(data.id))
        .map((selectedData: any) => {
          return {
            permissionsId: selectedData.permissionsId,
            functionName: selectedData.functionName,
            apiName: selectedData.apiName,
            id: selectedData.id,
          };
        }),
    };
  });
}
const updatePower = async () => {
  if (checkedPowerList.length === 0) {
    store.warning("请选择权限配置");
    return false;
  }
  const params = transformData(powerList.value, checkedPowerList.value);
  console.log(JSON.stringify(params));
  let res: any = await InsertOrUpdateUserPermissions(params);
  if (res.result.isSuccess) {
    GetUserPermissionsFun();
    store.success(res.result.message); // 错误提示
    closeDalog();
  } else {
    store.error(res.result.message); // 错误提示
  }
};

const GetUserPermissionsFun = async () => {
  let res: any = await GetUserPermissions(null);
  if (res.result.isSuccess) {
    // 获取所有项中的datas中id的数组
    const idArray: any = res.result.result.flatMap((item: any) =>
      item.datas.map((data: any) => data.functionId)
    );
    defaultCheckedKeys.value = idArray;
    powerData.value = res.result.result.map((e: any) => {
      const children = e.datas.map((item: any) => item.functionName);
      return {
        powerName: e.permissions,
        powerContent: children.join("、"),
      };
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 修改头像
 * @return {*}
 * @author: cool panda
 */
const uploaduserFun = async () => {
  if (!avatarInfo.value) {
    store.warning("请先上传头像");
    return false;
  }
  let res: any = await UpdateUserAvatarInfo({ avatar: avatarInfo.value });
  if (res.result.isSuccess) {
    GetSingleUserInfoFun();
    store.success(res.result.message); // 错误提示
    openuserUpload(false);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//获取用户信息
const GetSingleUserInfoFun = async () => {
  const res: any = await GetSingleUserInfo();
  if (res.result.isSuccess) {
    store.setUserInfo(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const customRequest = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      if (userUpload.value) {
        avatarInfo.value = imgUrl;
      } else {
        userEditData.value.avatar = imgUrl;
      }
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
//编辑或新增用户信息
const addUser = (row: any) => {
  previewFileList.value = [];
  if (row && row.avatar) {
    previewFileList.value = [
      {
        id: "1",
        name: "",
        status: "finished",
        url: row.avatar,
      },
    ];
  }
  if (row) {
    row.password = "";
    userEditData.value = JSON.parse(JSON.stringify(row));
  } else {
    userEditData.value = {
      account: "",
      permissions: "",
      department: "",
      workNumber: "",
      phoneNumber: "",
      password: "",
      isDelete: false,
      avatar: "",
      companyId: 1,
    };
  }
};
const closeUserInfoDialog = (val: boolean) => {
  userEditData.value = false;
};
/**
 * @description: 获取产品信息
 * @return {*}
 * @author: cool panda
 */
const GetMdsInfomationFun = async () => {
  const res: any = await GetMdsInfomation({});
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      productInfo.value = result;
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 获取用户列表
 * @return {*}
 * @author: cool panda
 */
const GetAllUserInfoFun = async () => {
  const params = {
    keyWord: pagination.value.keyWord,
    pageNumber: pagination.value.page,
    pageSize: pagination.value.pageSize,
  };
  const res: any = await GetAllUserInfo(params);
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      userList.value = result;
      pagination.value.itemCount = res.result.otherResult;
    }
    console.log(JSON.stringify(pagination.value));
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 获取用户列表
 * @return {*}
 * @author: cool panda
 */
const GetPermissionsListFun = async () => {
  const res: any = await GetPermissionsList({});
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      powerOptions.value = result.map((e: any) => {
        const item = {
          label: e.permissions,
          value: e.permissions,
          datas: e.datas,
        };
        return item;
      });
      const openList: any = [];
      powerList.value = result;
      console.log(JSON.stringify(result));

      powerTree.value = result.map((e: any) => {
        const children = e.datas.map((m: any) => {
          return {
            label: m.functionName,
            key: m.id,
          };
        });
        openList.push(e.permissions);
        const item = {
          label: e.permissions,
          key: e.permissions,
          children: children,
        };
        return item;
      });
      console.log(JSON.stringify(powerTree.value));

      defaultExpandedKeys.value = openList;
      userCount.value = res.result.otherResult;
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const InsertUserInfoFun = async () => {
  const {
    id,
    account,
    permissions,
    department,
    workNumber,
    phoneNumber,
    avatar,
  } = userEditData.value;
  if (!account) {
    store.warning("请输入用户名"); // 错误提示
    return false;
  } else if (!permissions) {
    store.warning("请选择权限"); // 错误提示
    return false;
  } else if (!department) {
    store.warning("请输入部门"); // 错误提示
    return false;
  } else if (!workNumber) {
    store.warning("请输入员工号"); // 错误提示
    return false;
  } else if (!phoneNumber) {
    store.warning("请输入手机号"); // 错误提示
    return false;
  }
  // else if (!avatar) {
  //   store.warning("请上传头像"); // 错误提示
  //   return false;
  // }
  delete userEditData.value.companyName;
  let res: any = null;
  if (id) {
    res = await UpdateUserInfo({ data: userEditData.value });
  } else {
    res = await InsertUserInfo({ data: userEditData.value });
  }
  if (res.result.isSuccess) {
    store.success(res.result.message); // 错误提示
    pagination.value.page = 1;
    GetAllUserInfoFun();
    userEditData.value = false;
  } else {
    store.error(res.result.message); // 错误提示
  }
};
/**
 * @description: 获取公司列表
 * @return {*}
 * @author: cool panda
 */
const GetAllCompanyDataFun = async () => {
  const params = {
    companyName: "",
    pageNumber: 1,
    pageSize: 1000,
  };
  const res: any = await GetAllCompanyData(params);
  if (res.result.isSuccess) {
    const list = res.result.result;
    companyData.value = list.map((e: any) => {
      const item = {
        label: e.companyName,
        value: e.id,
      };
      return item;
    });
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const closeBtn = (val: boolean) => {
  if (val) {
    const data = JSON.parse(JSON.stringify(productInfo.value));
    data.img = [
      {
        id: "1",
        name: "",
        status: "finished",
        url: data.companyLogo,
      },
    ];
    console.log(data);
    editData.value = data;
  }

  editProduct.value = val;
};
const closeWin = (type: number) => {
  if (type === 2) {
    GetMdsInfomationFun();
  }
  closeBtn(false);
};
const time = ref(null) as any;
const searchFun = () => {
  if (time.value) {
    clearTimeout(time.value);
  }
  time.value = setTimeout(() => {
    GetAllUserInfoFun();
  }, 500);
};
const logOut = () => {
  store.setToken("");
  Cookies.remove("token");
  Cookies.remove("userInfo");
  localStorage.clear();
  // window.location.reload();
  router.replace("login");
};
// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
onMounted(async () => {
  // todo 屏幕适应
  windowDraw();
  calcRate();
  GetMdsInfomationFun();
  GetAllUserInfoFun();
  GetAllCompanyDataFun();
  await GetPermissionsListFun();
  GetUserPermissionsFun();
});
onUnmounted(() => {
  unWindowDraw();
});
</script>
<style lang="less" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: calc(100vh - 88px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
:deep(.n-input) {
  --n-color: rgba(57, 66, 72, 1) !important;
  --n-color-focus: rgba(57, 66, 72, 1) !important;
  --n-text-color: rgb(255, 255, 255) !important;
  --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
  --n-border-hover: 1px solid #02a8ae !important;
  --n-border-focus: 1px solid #02a8ae !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:deep(.n-input__input) {
  text-align: left !important;
}

:deep(.n-upload) {
  --n-dragger-color: rgba(57, 66, 72, 1) !important;
  --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
}

:deep(.n-tabs) {
  --n-bar-color: #02a8ae !important;
  --n-tab-text-color: #fff !important;
  --n-tab-text-color-active: #02a8ae !important;
  --n-tab-text-color-hover: #02a8ae !important;
}

:deep(.n-data-table) {
  --n-th-color: rgba(57, 66, 72, 1) !important;
  --n-td-color: rgba(96, 103, 108, 1) !important;
  --n-th-text-color: #fff !important;
  --n-td-text-color: #fff !important;
  --n-td-color-hover: rgba(2, 168, 174, 0.3) !important;
  --n-border-color: rgba(57, 66, 72, 1) !important;
}

:deep(.n-pagination) {
  --n-item-border-active: 1px solid #02a8ae !important;
  --n-item-text-color-active: #fff !important;
  --n-item-text-color-hover: #02a8ae !important;
  --n-item-color: #fff !important;
  --n-item-color-hover: rgba(1, 192, 228, 1) !important;
  --n-item-color-active: rgba(1, 192, 228, 1) !important;
  --n-item-color-pressed: #fff !important;
  --n-item-color-active-hover: rgba(1, 192, 228, 1) !important;
  --n-button-color: #fff !important;
  --n-button-color-hover: rgba(1, 192, 228, 1) !important;
}

:deep(.n-data-table__pagination) {
  justify-content: center;
}

:deep(.n-button) {
  --n-border: none !important;
}

.user-upload-view {
  position: relative;
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .notice {
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #d8d8d8;
    line-height: 17px;
  }

  :deep(.n-upload-trigger--image-card),
  :deep(.n-upload-file--image-card-type) {
    width: 280px;
    height: 280px;
  }
}

.user-page {
  min-width: 1205px;
  user-select: none;
  width: 100%;
  height: calc(100vh - 88px);
  padding: 0 10px;
  color: #fff;

  .card {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;

    .card-item {
      width: 497px;
      height: 680px;
      color: #fff;
      padding: 25px;
      background-color: #394248;
      margin-right: 10px;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #02a8ae;
        // text-align: left;
      }

      .font-24 {
        font-size: 24px;
      }

      .font-16 {
        font-size: 16px;
      }

      .margin-bot30 {
        margin-bottom: 20px;
      }

      .margin-top40 {
        margin-top: 30px;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        margin: 66px 0 180px 0;

        .user-name {
          margin-top: 30px;
        }
      }

      .btn-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn-item {
          width: 277px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin-bottom: 30px;
        }

        .btn-item:last-child {
          margin-bottom: 0;
        }

        .bg-blue {
          background: #02a8ae;
        }

        .bg-yellow {
          background: #ee9708;
        }
      }

      .label-item {
        display: flex;
        align-items: center;
        height: 35px;
        margin-bottom: 20px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }
      }

      .label-item:last-child {
        margin-bottom: 0;
      }

      .logo-box {
        display: flex;
        margin-bottom: 25px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }

        .logo-div {
          width: 90px;
          height: 90px;
          border: 1px solid rgba(255, 255, 255, 0.3);

          .companyLogo {
            width: 100%;
            object-fit: contain;
          }
        }
      }

      .tab-class {
        color: #fff;
      }

      .search-box {
        display: flex;
        justify-content: space-between;
        height: 35px;
        margin-bottom: 20px;

        .add {
          font-size: 14px;
          color: #fff;
          background-color: #01c0e4;
          margin-left: 30px;
          // border: none;
        }
      }
    }

    .card-item:last-child {
      margin-right: 0;
    }
  }
}

.user-dialog {
  :deep(.n-input) {
    --n-color: #60676c !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.n-upload) {
    --n-dragger-color: #60676c !important;
    --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
  }

  :deep(.n-base-selection) {
    --n-color: #60676c !important;
    //   --n-color-focus: #60676c !important;
    //   --n-placeholder-color: red !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border-active: 1px solid #02a8ae !important;
    --n-text-color: #fff !important;
    --n-color-active: #60676c !important;
  }
  .div {
    display: flex;
  }
  .submit-btn {
    &.del {
      background: rgb(228, 1, 1);
      margin-left: 15px;
    }
    cursor: pointer;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 36px;
    background: #01c0e4;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
      0px 2px 5px 0px rgba(25, 15, 15, 0.07),
      0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    font-size: 21px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 33px;
  }

  .desc {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 17px;
    margin-bottom: 15px;

    .icon {
      margin-right: 6px;
    }
  }

  .user-info-item {
    margin-bottom: 15px;

    .notice {
      font-size: 12px;
      color: #d8d8d8;
    }
  }
}

//系统设置弹框样式
.setting-dialog {
  font-size: 16px;

  :deep(.n-input) {
    --n-color: #60676c !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.n-input__input) {
    text-align: left !important;
  }

  .setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .level-menu {
    margin-right: 20px;
  }

  .bg-color {
    :deep(.n-color-picker) {
      width: 26px;
      --n-height: 26px !important;
      --n-border: none !important;
    }

    :deep(.n-color-picker-trigger__value) {
      top: 0px !important;
      left: 0px !important;
    }

    :deep(.n-color-picker-trigger__fill) {
      left: 0px !important;
      right: 0px !important;
      top: 4px !important;
      bottom: -4px !important;
    }
  }
  .bg-img {
    display: flex;

    .img-upload {
      width: 152px;
      height: 86px;

      :deep(.n-upload) {
        --n-dragger-color: #60676c !important;
        --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
      }

      :deep(.n-upload-trigger--image-card) {
        width: 152px;
        height: 86px;
      }

      .notice {
        font-size: 12px;
        color: #d8d8d8;
      }
    }
  }

  .margin-left20 {
    margin-left: 20px;
  }

  .style-check {
    display: flex;
    align-items: center;
    width: 308px;
    height: 38px;
    padding: 0 30px;
    background: #d8d8d8;
    box-shadow: 0px 0px 10px 0px rgba(197, 197, 197, 0.5);
    border-radius: 22px;

    .item-style {
      margin-right: 20px;

      :deep(.n-base-selection) {
        --n-color: #d8d8d8 !important;
        --n-color-active: #d8d8d8 !important;
        --n-border: none !important;
        --n-border-hover: none !important;
        --n-border-focus: none !important;
        --n-border-active: none !important;
        --n-text-color: #fff !important;
        --n-arrow-color: #000 !important;
      }

      .font-select {
        width: 100px;
      }

      .font-size-select {
        width: 60px;
      }
    }

    :deep(.n-color-picker) {
      width: 16px;
      --n-height: 16px !important;
      --n-border: none !important;
    }

    :deep(.n-color-picker-trigger__value) {
      top: -8px !important;
      left: 0px !important;
    }

    :deep(.n-color-picker-trigger__fill) {
      left: 0px !important;
      right: 0px !important;
      top: 17px !important;
      bottom: -3px !important;
    }
  }
}

.power-btn {
  margin-top: 15px;
  background: #01c0e4;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 15px;
}

.submit-btn1 {
  cursor: pointer;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 36px;
  background: #01c0e4;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
    0px 2px 5px 0px rgba(25, 15, 15, 0.07), 0px 5px 8px 0px rgba(0, 0, 0, 0.05);
  font-size: 21px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
}

.pagination-view {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.power-view {
  padding: 40px;

  :deep(.n-tree-node:not(.n-tree-node--disabled):hover) {
    background: none;
  }

  :deep(.n-tree-node-content__text) {
    color: #ffffff;
  }
}
</style>
